<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>最美教师节，只因遇见你</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/component.css" />
	</head>

	<body>
		<div class="container">
			<!--模板-->
			<div class="templateStyle"></div>
			<!--选择模板-->
			<ul class="template_lists">
				<li>
					<img src="img/templet_01.png" />
					<p class="template_listText">模板一</p>
				</li>
				<li>
					<img src="img/templet_02.png" />
					<p class="template_listText">模板二</p>
				</li>
				<li>
					<img src="img/templet_03.png" />
					<p class="template_listText">模板三</p>
				</li>
			</ul>
			<!--选择上传图片-->
			<div class="selectPicture" style="display: none;">
				<input accept="image/*" type="file" class="selectPictureAddress" />
			</div>
			<!--显示选择图片-->
			<div class="displayPicture" style="display: none;">
				<img src="" class="displayPictureAddress" />
			</div>
			<!--下一步-->
			<div class="template_btn">
				<img src="" />
			</div>
			<!--文字-->
			<div class="radioVal" style="display: none;"></div>
			<div class="kindergartenAndName" style="display: none;"></div>
			<!--隐藏按钮-->
			<div style="display: none;" class="displayBtn"></div>
		</div>
		<!--按钮-->
		<div class="complete_swatBtn next_btn2" style="display: none;">
			<img src="img/swat.png" title="重拍" />
			<p class="complete_btnText2">重拍</p>
		</div>
		<div class="complete_rcodeBtn" style="display: none;">
			<img src="img/QRcode.png" alt="" />
			<p class="complete_btnText2">长按二维码</p>
		</div>
		<div class="complete_shareBtn next_btn2" style="display: none;">
			<img src="img/share.png" alt="" />
			<p class="complete_btnText2">分享</p>
		</div>
		<!--分享-->
		<div class="share" style="display: none;"><img src="img/shareimg.png" /></div>
		<script src="js/rem.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/html2canvas.min.js"></script>
		<script src="js/component.js"></script>
		<script src="js/jweixin-1.0.0.js"></script>
		<script src="js/wx.js"></script>
		<script>
			var selectImg = sessionStorage.getItem("selectImg");
			if(selectImg == 1) {
				$(".displayPictureAddress").removeClass("position");

				$(function() {
					$(".template_lists li:first").trigger("click");
				})

				$(".template_lists li").click(function() {
					itemIndex = $(this).index();
					var liIndex = $(this).index();
					sessionStorage.setItem("liIndex", liIndex);
					$(this).addClass('template_listBg').siblings().removeClass('template_listBg');
					if(itemIndex == 0) {
						$(".templateStyle").css({
							"background": "url(img/template1.png) no-repeat",
							"background-size": "100% 100%"
						})
						$(".template_lists li:eq(" + itemIndex + ") img").attr("src", "img/stemplet_01.png");
						$(".template_lists li:eq(1) img").attr("src", "img/templet_02.png");
						$(".template_lists li:eq(2) img").attr("src", "img/templet_03.png");
						$(".template_btn img").attr("src", "img/template_btn01.png");
						$(".container").css({
							"background": "#f0f0f0",
						})
					} else if(itemIndex == 1) {
						$(".templateStyle").css({
							"background": "url(img/template2.png) no-repeat",
							"background-size": "100% 100%"
						})
						$(".template_lists li:eq(0) img").attr("src", "img/templet_01.png");
						$(".template_lists li:eq(" + itemIndex + ") img").attr("src", "img/stemplet_02.png");
						$(".template_lists li:eq(2) img").attr("src", "img/templet_03.png");
						$(".template_btn img").attr("src", "img/template_btn01.png");
						$(".container").css({
							"background": "#fff",
						})
					} else if(itemIndex == 2) {
						$(".templateStyle").css({
							"background": "url(img/template3.png) no-repeat",
							"background-size": "100% 100%"
						})
						$(".template_lists li:eq(0) img").attr("src", "img/templet_01.png");
						$(".template_lists li:eq(1) img").attr("src", "img/templet_02.png");
						$(".template_lists li:eq(" + itemIndex + ") img").attr("src", "img/stemplet_03.png");
						$(".template_btn img").attr("src", "img/template_btn02.png");
						$(".container").css({
							"background": "#fff",
						})
					}
				})

				var pic = sessionStorage.getItem("pic");

				$(".displayPictureAddress").attr("src", pic)

				if($(".displayPictureAddress").attr("src") == "") {
					$(".selectPicture").show();
				} else {
					$(".displayPicture").show();
					$(".displayPictureAddress").addClass("resize-image");
					var resizeableImage = function(image_target) {
						// Some variable and settings
						var $container,
							orig_src = new Image(),
							image_target = $(image_target).get(0),
							event_state = {},
							constrain = false,
							min_width = 60, // Change as required
							min_height = 60,
							max_width = 800, // Change as required
							max_height = 900,
							resize_canvas = document.createElement('canvas');

						init = function() {

							// When resizing, we will always use this copy of the original as the base
							orig_src.src = image_target.src;

							// Wrap the image with the container and add resize handles
							$(image_target).wrap('<div class="resize-container"></div>')
								.before('<span class="resize-handle resize-handle-nw"></span>')
								.before('<span class="resize-handle resize-handle-ne"></span>')
								.after('<span class="resize-handle resize-handle-se"></span>')
								.after('<span class="resize-handle resize-handle-sw"></span>');

							// Assign the container to a variable
							$container = $(image_target).parent('.resize-container');

							// Add events
							$container.on('mousedown touchstart', '.resize-handle', startResize);
							$container.on('mousedown touchstart', 'img', startMoving);
							$('.js-crop').on('click', crop, screenshot);
						};

						startResize = function(e) {
							e.preventDefault();
							e.stopPropagation();
							saveEventState(e);
							$(document).on('mousemove touchmove', resizing);
							$(document).on('mouseup touchend', endResize);
						};

						endResize = function(e) {
							e.preventDefault();
							$(document).off('mouseup touchend', endResize);
							$(document).off('mousemove touchmove', resizing);
						};

						saveEventState = function(e) {
							// Save the initial event details and container state
							event_state.container_width = $container.width();
							event_state.container_height = $container.height();
							event_state.container_left = $container.offset().left;
							event_state.container_top = $container.offset().top;
							event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
							event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

							// This is a fix for mobile safari
							// For some reason it does not allow a direct copy of the touches property
							if(typeof e.originalEvent.touches !== 'undefined') {
								event_state.touches = [];
								$.each(e.originalEvent.touches, function(i, ob) {
									event_state.touches[i] = {};
									event_state.touches[i].clientX = 0 + ob.clientX;
									event_state.touches[i].clientY = 0 + ob.clientY;
								});
							}
							event_state.evnt = e;
						};

						resizing = function(e) {
							var mouse = {},
								width, height, left, top, offset = $container.offset();
							mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
							mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

							// Position image differently depending on the corner dragged and constraints
							if($(event_state.evnt.target).hasClass('resize-handle-se')) {
								width = mouse.x - event_state.container_left;
								height = mouse.y - event_state.container_top;
								left = event_state.container_left;
								top = event_state.container_top;
							} else if($(event_state.evnt.target).hasClass('resize-handle-sw')) {
								width = event_state.container_width - (mouse.x - event_state.container_left);
								height = mouse.y - event_state.container_top;
								left = mouse.x;
								top = event_state.container_top;
							} else if($(event_state.evnt.target).hasClass('resize-handle-nw')) {
								width = event_state.container_width - (mouse.x - event_state.container_left);
								height = event_state.container_height - (mouse.y - event_state.container_top);
								left = mouse.x;
								top = mouse.y;
								if(constrain || e.shiftKey) {
									top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
								}
							} else if($(event_state.evnt.target).hasClass('resize-handle-ne')) {
								width = mouse.x - event_state.container_left;
								height = event_state.container_height - (mouse.y - event_state.container_top);
								left = event_state.container_left;
								top = mouse.y;
								if(constrain || e.shiftKey) {
									top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
								}
							}

							// Optionally maintain aspect ratio
							if(constrain || e.shiftKey) {
								height = width / orig_src.width * orig_src.height;
							}

							if(width > min_width && height > min_height && width < max_width && height < max_height) {
								// To improve performance you might limit how often resizeImage() is called
								resizeImage(width, height);
								// Without this Firefox will not re-calculate the the image dimensions until drag end
								$container.offset({
									'left': left,
									'top': top
								});
							}
						}

						resizeImage = function(width, height) {
							resize_canvas.width = width;
							resize_canvas.height = height;
							resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
							$(image_target).attr('src', resize_canvas.toDataURL("image/png"));
						};

						startMoving = function(e) {
							e.preventDefault();
							e.stopPropagation();
							saveEventState(e);
							$(document).on('mousemove touchmove', moving);
							$(document).on('mouseup touchend', endMoving);
						};

						endMoving = function(e) {
							e.preventDefault();
							$(document).off('mouseup touchend', endMoving);
							$(document).off('mousemove touchmove', moving);
						};

						moving = function(e) {
							var mouse = {},
								touches;
							e.preventDefault();
							e.stopPropagation();

							touches = e.originalEvent.touches;

							mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
							mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
							$container.offset({
								'left': mouse.x - (event_state.mouse_x - event_state.container_left),
								'top': mouse.y - (event_state.mouse_y - event_state.container_top)
							});
							// Watch for pinch zoom gesture while moving
							if(event_state.touches && event_state.touches.length > 1 && touches.length > 1) {
								var width = event_state.container_width,
									height = event_state.container_height;
								var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
								a = a * a;
								var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
								b = b * b;
								var dist1 = Math.sqrt(a + b);

								a = e.originalEvent.touches[0].clientX - touches[1].clientX;
								a = a * a;
								b = e.originalEvent.touches[0].clientY - touches[1].clientY;
								b = b * b;
								var dist2 = Math.sqrt(a + b);

								var ratio = dist2 / dist1;

								width = width * ratio;
								height = height * ratio;
								// To improve performance you might limit how often resizeImage() is called
								resizeImage(width, height);
							}
						};

						crop = function() {
							//Find the part of the image that is inside the crop box
							var crop_canvas,
								left = $('.overlay').offset().left - $container.offset().left,
								top = $('.overlay').offset().top - $container.offset().top,
								width = $('.overlay').width(),
								height = $('.overlay').height();

							crop_canvas = document.createElement('canvas');
							crop_canvas.width = width;
							crop_canvas.height = height;

							crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
							window.open(crop_canvas.toDataURL("image/png"));
						}

						// html5 实现网页截屏 页面生成图片(图文)
						// 说明在测试过程中出现的问题如果页面上引用跨域的图片文件调用toDataURL的时候会出错
						// SecurityError: The operation is insecure.
						// 解决方法：在跨域的服务器上设置header设置为允许跨域请求
						// access-control-allow-origin: * access-control-allow-credentials: true

						screenshot = function(event) {
							event.preventDefault();
							html2canvas(document.body, {
								allowTaint: true,
								taintTest: false,
								onrendered: function(canvas) {
									canvas.id = "mycanvas";
									//document.body.appendChild(canvas);
									//生成base64图片数据
									var dataUrl = canvas.toDataURL();
									var newImg = document.createElement("img");
									newImg.src = dataUrl;
									document.body.innerHTML = '';
									document.body.appendChild(newImg);
								}
							});
						}

						init();
					};

					// Kick everything off with the target image
					resizeableImage($('.resize-image'));
				}

				$(".template_btn").click(function() {
					var imgWidth = $(".displayPictureAddress").width();
					var imgHeight = $(".displayPictureAddress").height();
					var positionLeft = $('.resize-container').position().left;
					var positionTop = $('.resize-container').position().top;

					sessionStorage.setItem("imgWidth", imgWidth);
					sessionStorage.setItem("imgHeight", imgHeight);
					sessionStorage.setItem("positionLeft", positionLeft);
					sessionStorage.setItem("positionTop", positionTop);

					var displayPictureAddress = $(".displayPictureAddress").attr("src");
					sessionStorage.setItem("displayPictureAddress", displayPictureAddress);
					window.location.href = "writeData.html";
				})

			} else {
				$(".template_lists,.template_btn").hide();

				var itemIndex = sessionStorage.getItem("liIndex");
				if(itemIndex == 0) {
					$(".templateStyle").css({
						"background": "url(img/template1.png) no-repeat",
						"background-size": "100% 100%"
					})
					$(".container").css({
						"background": "#f0f0f0",
					})
					$(".complete_rcodeBtn .complete_btnText2").css({
						"background": "#fff",
					})
				} else if(itemIndex == 1) {
					$(".templateStyle").css({
						"background": "url(img/template2.png) no-repeat",
						"background-size": "100% 100%"
					})
					$(".container").css({
						"background": "#fff",
					})
					$(".complete_rcodeBtn .complete_btnText2").css({
						"background": "#EEEDEC",
					})
				} else if(itemIndex == 2) {
					$(".templateStyle").css({
						"background": "url(img/template3.png) no-repeat",
						"background-size": "100% 100%"
					})
					$(".container").css({
						"background": "#fff",
					})
					$(".complete_rcodeBtn .complete_btnText2").css({
						"background": "#9EDBDA",
					})

				}

				var displayPictureAddress = sessionStorage.getItem("displayPictureAddress");
				$(".displayPictureAddress").attr("src", displayPictureAddress)
				if($(".displayPictureAddress").attr("src") != "") {
					$(".displayPicture").show();
				}

				var radioVal = sessionStorage.getItem("radioVal");
				var textareaVal = sessionStorage.getItem("textareaVal");
				var nameVal = sessionStorage.getItem("nameVal");
				var kindergartenVal = sessionStorage.getItem("kindergartenVal");
				$(".radioVal,.kindergartenAndName").show();
				if(textareaVal == "") {
					$(".radioVal").html(radioVal)
				} else {
					$(".radioVal").html(textareaVal)
				}
				if(kindergartenVal != "" && kindergartenVal != "undefined" || nameVal != "" && nameVal != "undefined") {
					$(".kindergartenAndName").html(kindergartenVal + "  " + nameVal)
				}

				$(function() {
					$(".displayBtn").trigger("click");
				})

				$(".displayBtn").click(function() {
					screenshot();
				})

				var imgHeight = sessionStorage.getItem("imgHeight");
				var imgWidth = sessionStorage.getItem("imgWidth");
				var positionLeft = sessionStorage.getItem("positionLeft");
				var positionTop = sessionStorage.getItem("positionTop");
				$(".displayPictureAddress").addClass("position");
				$(".displayPictureAddress").css({
					"width": imgWidth * 2,
					"height": imgHeight * 2
				})
				$(".displayPictureAddress").css("left", positionLeft * 2 + "px")
				$(".displayPictureAddress").css("top", positionTop * 2 + "px")

				$(".complete_rcodeBtn").show();
				$(".complete_rcodeBtn .complete_btnText2").html("获取我的海报");
				$(".radioVal").css({
					"bottom": "5.4rem",
					"font-size": "0.56rem"
				})
				$(".kindergartenAndName").css({
					"bottom": "4.2rem",
					"font-size": "0.56rem"
				})
				$(".complete_rcodeBtn").css({
					"width": "2.4rem",
					"height": "2.4rem",
					"left": "6.4rem",
					"bottom": "1.4rem"
				})
				$(".complete_rcodeBtn .complete_btnText2").css({
					"bottom": "-0.88rem",
					"margin-left": "-2rem",
					"left": "50%",
					"width": "4rem",
					"height": "0.48rem",
					"font-size": "0.48rem",
					"line-height": "0.48rem"
				})

				screenshot = function(event) {
					var width = $('.container').width(); //这是我们准备画的div
					var height = $('.container').height();
					html2canvas(document.body, {
						allowTaint: true,
						taintTest: false,
						onrendered: function(canvas) {

							canvas.id = "mycanvas";
							//document.body.appendChild(canvas);
							//生成base64图片数据
							var dataUrl = canvas.toDataURL();
							var newImg = document.createElement("img");
							newImg.setAttribute("class", "canvasImg");
							newImg.src = dataUrl;

							$(".container").hide();
							
							$(".complete_swatBtn,.complete_shareBtn").show();
							$(".canvasImg").attr("src", newImg.src);
							$(".complete_rcodeBtn .complete_btnText2").html("识别二维码");
							$(".complete_rcodeBtn img").hide()
							$(".radioVal").css({
								"bottom": "2.7rem",
								"font-size": "0.28rem"
							})
							$(".kindergartenAndName").css({
								"bottom": "2.1rem",
								"font-size": "0.28rem"
							})
							$(".complete_rcodeBtn").css({
								"width": "1.2rem",
								"height": "1.2rem",
								"left": "3.2rem",
								"bottom": "0.7rem"
							})
							$(".complete_rcodeBtn .complete_btnText2").css({
								"bottom": "-0.44rem",
								"margin-left": "-1rem",
								"left": "50%",
								"width": "2rem",
								"height": "0.24rem",
								"font-size": "0.24rem",
								"line-height": "0.24rem"
							})

							var pic2 = sessionStorage.getItem("pic2");
							

							$.ajax({
								type: "POST",
								url: "http://9sd6qf.natappfree.cc/teacher/api/up_base",
								data: {
									'imgbase': dataUrl,
									'imgName': pic2,
									'imgOwn': kindergartenVal
								},
								dataType: "json",
								success: function(data) {
									//$("#commonLayout_appcreshi").parent().html(data);
								}
							});
							document.body.appendChild(newImg);
						},
						width: width * 2,
						height: height * 2
					});

					$(".complete_swatBtn").click(function() {
						window.location.href = "homePage"
					})

					$(".complete_shareBtn").click(function() {
						$(".share").show();
					})

					$(".share").click(function() {
						$(".share").hide();
					})
				}
			}
		</script>
	</body>

</html>